<template>
  <div>
    <!-- 视频播放器容器 -->
    <video ref="videoPlayer" class="video-js vjs-default-skin videocon"></video>
  </div>
</template>

<script>
import videojs from "video.js";
import "video.js/dist/video-js.min.css";

export default {
  name: "VideoJSPlayer",
  props: {
    options: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      player: null,
    };
  },
  mounted() {
    this.player = videojs(
      this.$refs.videoPlayer,
      this.options,
      function onPlayerReady() {
        console.log("Your player is ready!");
      }
    );
    this.player.on("ended", function () {
      videojs.log("视频播放完毕");
    });
    this.player.on("pause", function () {
      videojs.log("视频暂停", this.remainingTimeDisplay());
    //   this.remainingTimeDisplay()
    });
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose();
    }
  },
};
</script>

<style lang="scss" scoped>
/* 如果需要添加额外的样式 */
.videocon {
  width: 100%;
  height: 100vh;
  border: 0px solid red;
}
</style>
